<template>
  <drag-dialog v-model="visible" title="数据配置">
    <div class="dict-container">
      <div class="header">
        <div>数据来源:</div>
        <el-radio-group v-model="localData.dicOption" @change="handleDicTypeChange">
          <el-radio v-for="opt in typeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
        </el-radio-group>
      </div>
      <div class="content">
        <el-form label-position="right" label-width="100px" label-suffix=":">
          <template v-if="localData.dicOption == 'remote'">
            <custom-ajax-setting v-model="localData.ajaxSetting" :options="options" :props="{}" />
            <el-form-item label="返回结构层次">
              <el-input v-model="localData.dicRes" placeholder="默认为res" clearable />
            </el-form-item>
          </template>
          <template v-else>
            <div>options=</div>
            <div>
              <el-input type="textarea" :rows="20" v-model="localData.staticJson" placeholder="请输入静态json数据" />
            </div>

            <div>注：具体配置参考ECharts官方样例</div>
          </template>
        </el-form>
      </div>
    </div>
    <template #footer>
      <dialog-footer @ok="submit" @cancel="cancel" />
    </template>
  </drag-dialog>
</template>

<script>
import customAjaxSetting from '../../../components/customAjaxSetting.vue';
import { cloneDeep } from 'lodash-es';

export default {
  components: {
    customAjaxSetting
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      visible: false,
      localData: {},
      typeOptions: [
        {
          label: '接口数据',
          value: 'remote'
        },
        {
          label: '静态数据',
          value: 'static'
        }
      ]
    };
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.visible = newVal;
        if (newVal) {
          this.localData = cloneDeep(this.data);
          if (!this.localData.ajaxSetting) {
            this.localData.ajaxSetting = {
              params: {
                withFormData: true
              }
            };
          }
        }
      },
      immediate: true
    },
    visible: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal);
      }
    }
  },
  methods: {
    submit() {
      this.$emit('submit', this.localData);
      this.visible = false;
    },
    cancel() {
      this.visible = false;
    },
    handleDicTypeChange(type){
      if(type == 'remote'){
        this.localData.staticJson = ''
      }else{
        this.localData.ajaxSetting.url = ''
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dict-container {
  width: 100%;

  .header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .content {
    width: 100%;
    height: 500px;
    overflow: auto;
    border: 1px solid rgb(220 223 230);
    padding: 8px 24px;
  }
}
</style>